<template>
   <div class="crumbs">
      <ul>
         <li v-for="(item, index) in CrumbsNav" :key="item.id">

            <router-link :to="item.path">
               {{item.NavName}}
               <span :data-index="index" :class="{'displayNode': index+1 === CrumbsNav.length}">
                  >
               </span>
            </router-link>
         </li>
      </ul>
   </div>
</template>

<script>
   export default {
      name: 'crumbsNav',
      props: {
         CrumbsNav: {
            type: Array,
            required: true,
            default() {
               return []
            }
         }
      },
      mounted() {
      }
   }
</script>

<style scoped lang="stylus">
   .crumbs
      display flex
      width 100%
      height 40px
      align-items center
      ul
         display flex
         li
            a
               font-size 14px
            span
               margin 0 15px
               color #999
   .displayNode
      display none
</style>
